<template>
  <div class="history-task">
    <el-table
      v-loading="listLoading"
      :data="disposeFormListViewTime(tableData, columns)"
      header-row-class-name="common-list-table-header__v2"
      :class="['bbx-normal-list-box']"
      stripe
      border
      max-height="500"
    >
      <template slot="empty">
        <BaseListForNoData
          v-show="!listLoading"
          :notice-msg="$t('common.base.tip.noData')"
        ></BaseListForNoData>
      </template>
      <el-table-column
        v-for="column in columns"
        :key="column.id"
        :prop="column.field"
        :label="column.displayName"
        :fixed="column.isFixed"
        :width="column.width"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <template v-if="column.field === 'taskNo'">
            <span class="link" @click="jumpTaskTab(row)">{{
              row.taskNo || ''
            }}</span>
          </template>
          
          <template v-else-if="column.field === 'stateName'">
            <span v-if="row.attribute && row.attribute.lastPassedNodeStateName">
              {{row.attribute.lastPassedNodeStateName}}
            </span>
            <span v-else>
              {{ row.stateName || '' }}
            </span>
          </template>
          <template v-else-if="column.field === 'products'">
            {{ row.products | tagName }}
          </template>
          <template v-else-if="column.field === 'executorUser'">
            {{ row.executorUser && row.executorUser.displayName }}
          </template>
          <template v-else-if="column.field === 'createTime' || column.field === 'completeTime'">
            {{ row[column.field] | fmt_datetime}}
          </template>
          <template v-else>
            {{
              $formatFormField(column, row)
            }}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="tableData.length" class="table-footer">
      <div class="list-info">
        <i18n path="common.base.table.totalCount">
          <span place="count" class="level-padding">{{ page.total }}</span>
        </i18n>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-size="page.pageSize"
        layout="prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';

import platform from '@src/platform';
import { getContractTask } from '@src/api/ContractApi';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum'
// 国际化时间转换
import { useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()
import i18n from '@src/locales';

export default {
  name: '',
  props: {
    contractId: {
      type: String,
      default: '',
    },
  },
  filters: {
    tagName(value) {
      if (!value || !Array.isArray(value) || !value.length) return '';

      return value
        .filter(
          item =>
            (item && item.tagName) ||
            (item && item.displayName) ||
            (item && item.name)
        )
        .map(item => item.tagName || item.displayName || item.name)
        .join('，');
    },
  },
  setup(props) {
    const columns = [
      {
        id: 1,
        displayName: i18n.t('common.label.taskNo'),
        field: 'taskNo',
      },
      {
        id: 2,
        displayName: i18n.t('common.label.taskTemplate'),
        field: 'templateName',
      },
      {
        id: 3,
        displayName: i18n.t('common.label.taskStatus'),
        field: 'stateName',
      },
      {
        id: 4,
        displayName: i18n.t('common.label.productName'),
        field: 'products',
      },
      {
        id: 5,
        displayName: i18n.t('common.fields.executorUser.displayName'),
        field: 'executorUser',
      },
      {
        id: 6,
        displayName: i18n.t('common.base.column.createTime'),
        field: 'createTime',
      },
      {
        id: 7,
        displayName: i18n.t('common.base.completeTime'),
        field: 'completeTime',
      },
      {
        id: 8,
        displayName: i18n.t('common.label.customerEvaluation'),
        field: 'degree',
      },
    ];

    const state = reactive({
      tableData: [],
      listLoading: false,
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
    });

    const getTaskList = async () => {
      state.listLoading = true;
      state.tableData = [];

      try {
        let res = await getContractTask({
          contractId: props.contractId,
          ...state.page,
        });

        if (!res.success)
          return platform.notification({
            title: res.message,
            type: 'error',
          });

        let { list, total } = res.result;

        state.tableData = list || [];
        state.page.total = total;
      } catch (error) {
        console.log('error=>', error);
      } finally {
        state.listLoading = false;
      }
    };

    // 页数改变时触发
    const handleCurrentChange = pageNum => {
      state.page.pageNum = pageNum;
      getTaskList();
    };

    const jumpTaskTab = row => {
      if (!row.id) return;

      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: row.id,
        titleKey: row.taskNo,
        params: 'noHistory=1',
        fromId
      })
    };

    onMounted(() => {
      getTaskList();
    });

    return {
      columns,
      ...toRefs(state),
      handleCurrentChange,
      jumpTaskTab,
      disposeFormListViewTime,
    };
  },
};
</script>
<style lang="scss" scoped>
@import './Statistics.scss';
.history-task {
  padding: 16px;
}
</style>